- 還沒看過上篇的請先看上篇喔。
- css雖然可以直接寫在div後面但是,那樣寫的話以後有些東西會用到一模一樣的style,會要再寫一次這樣會變得很麻煩,所以其實可以在外面的style裡面寫上此樣式,然後再把這個樣式套用在某個class上,再把div套上class就可以使用其樣式了,以後有任何div需要相同的樣式也可以直接給他class就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.test{
color: red;
font-size: 20px;
}
</style>
<body>
<p>Lorem, ipsum.</p>
<h1>Lorem ipsum dolor sit amet.</h1>
<h2>Lorem, ipsum.</h2>
<a href="www.youtube.com">Lorem, ipsum.</a>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7TVwjjjxSYr4-Ibegd4YU-GORlReBpnQej2C5ju8ouA&s" alt="pun">
<div class="test">
<p>Lorem ipsum dolor sit amet.</p>
<h2>Lorem, ipsum.</h2>
</div>
<div class="test">
Lorem ipsum dolor sit amet.
</div>
</body>
</html>
- css也不單單只有這樣,詳細可以看我另外的幾篇。
- html除了css還有一個很重要的東西JavaScript(js),這是用來做一些腳本、資料傳遞、動畫等等的功能,也可以用js更改css屬性,是一個十分強大的功能。
- 我們在裡面新增一個按鈕,之後添加onclick的Function,之後再script裡寫上此函式想要執行的動作如下。
<button onclick="myFunction()">Click me</button>
<script>
function myFunction(){
alert("Hello World");
}
</script>
- 以上,html、css、javaScript這三種就是前端Web的三巨頭,雖然看似很簡單,但是每樣東西都可以很深入的再研究,所以我接下來會再出幾篇講這幾個東西。